<template>
	<div class="userInfo">
		<el-avatar :size="200"
			:src="userInfo.headimgurl ? userInfo.headimgurl : defAvatarUrl"
			shape="square">
		</el-avatar>
		<el-descriptions :column="2"
    border
			title="我的中心">
			<template slot="extra">
				<el-button type="primary"
					size="small">操作</el-button>
			</template>
			<el-descriptions-item label="unid">{{ userInfo.unid }}</el-descriptions-item>
			<el-descriptions-item label="账号">{{ userInfo.username }}</el-descriptions-item>
			<el-descriptions-item label="vip等级">{{ userInfo.vipLevel?userInfo.vipLevel:"不是vip" }}</el-descriptions-item>
			<el-descriptions-item label="vip到期时间">
				<el-tag type="danger"
					effect="dark">{{ (+new Date() - userInfo.vipStamp)>0?"已过期":userInfo.vipExpires}}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="昵称">
				<el-tag type="success"
					effect="dark">{{ userInfo.nickname }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
			<el-descriptions-item label="角色名称">{{ userInfo.roleName }}</el-descriptions-item>
			<el-descriptions-item label="性别">
				<el-tag size="small">{{ userInfo.sex==1?"男":"女" }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="省份">{{
        userInfo.province
      }}</el-descriptions-item>
			<el-descriptions-item label="城市">{{ userInfo.city }}</el-descriptions-item>
		</el-descriptions>
	</div>
</template>
<script>
	import { mapState } from "vuex";
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				defAvatarUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
			}
		}
	};
</script>
